@import './com';

header {
    width: vw(750);
    height: vw(461);
    .head_top {
        width: vw(750);
        height: vw(76);
        margin-top: vw(49);
        display: flex;
        justify-content: space-between;
        a {
            margin-left: vw(23);
            width: vw(127);
            height: vw(57);
            border: vw(1) solid $col;
            border-radius: vw(30);
            text-align: center;
            line-height: vw(57);
            font-size: vw(26);
        }
        span {
            margin-top: vw(17);
            font-size: vw(26);
        }
        .ema {
            position: relative;
            margin-top: vw(13);
            right: vw(23);
            img {
                width: vw(62);
                height: vw(43);
            }
            &::after {
                content: '2';
                position: absolute;
                right: vw(0);
                top: vw(-15);
                width: vw(30);
                height: vw(30);
                text-align: center;
                color: #fff;
                background-color: red;
                border-radius: 50%;

                }
            }
        }
    
    
    .head_ct {
        display: flex;
        justify-content: space-between;
        height: vw(171);
        .head_ct_one {
            display: flex;
            justify-content: space-around;
            .box {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: vw(27);
            }
            img {
                margin-left: vw(23);
                width: vw(171);
                height: vw(171);
            }
            a:first-of-type {
                font-size: vw(30);
            }
            a:nth-of-type(2) {
                font-size: vw(26);
                color: rgb(170, 170, 170);
            }
        }
        span {
            line-height: vw(171);
            margin-right: vw(21);
            font-size: vw(100);
        }
    }

    .head_bt {
        margin-top: vw(28);
        display: flex;
        justify-content: space-around;
        .head_bt_one {
            width: vw(193);
            height: vw(150);
            background-color: #b2e0a0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
            img {
                margin: 0 auto;
                width: vw(83);
                height: vw(89);
            }
        }

        .head_bt_two {
            width: vw(193);
            height: vw(150);
            background-color: #a0dce0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
            img {
                margin: 0 auto;
                width: vw(82);
                height: vw(82);
            }
        }

        .head_bt_three {
            width: vw(193);
            height: vw(150);
            background-color: #b2e0a0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
            img {
                margin: 0 auto;
                width: vw(128);
                height: vw(82);
            }
        }
    }
}

main {
    display: flex;
    flex-direction: column;
    .main_top {
        display: flex;
        justify-content: space-between;
        .top_one {
            margin-left: vw(23);
            display: flex;
            justify-content: space-around;
            div {
                width: vw(100);
                height: vw(63);
                img {
                    width: vw(60);
                    height: vw(73);
                }
            }
            a {
                line-height: vw(73);
            }
        }

        .top_two {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: vw(23);
            a {
                margin-right: vw(10);
            }
            img {
                width: vw(28);
                height: vw(28);
            }
        }
    }

    .main_one {
        margin-top: vw(31);
        display: flex;
        justify-content: space-between;
        .top_one {
            margin-left: vw(23);
            display: flex;
            justify-content: space-around;
            div {
                width: vw(100);
                height: vw(63);
                img {
                    width: vw(73);
                    height: vw(73);
                }
            }
            a {
                line-height: vw(73);
            }
        }

        .top_two {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: vw(23);
            a {
                margin-right: vw(10);
            }
            img {
                width: vw(28);
                height: vw(28);
            }
        }
    }

    .main_two {
        margin-top: vw(31);
        display: flex;
        justify-content: space-between;
        .top_one {
            margin-left: vw(23);
            display: flex;
            justify-content: space-around;
            div {
                width: vw(100);
                height: vw(63);
                img {
                    width: vw(93);
                    height: vw(61);
                }
            }
            a {
                line-height: vw(73);
            }
        }

        .top_two {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: vw(23);
            a {
                margin-right: vw(10);
            }
            img {
                width: vw(28);
                height: vw(28);
            }
        }
    }

    .main_three {
        margin-top: vw(31);
        display: flex;
        justify-content: space-between;
        .top_one {
            margin-left: vw(23);
            display: flex;
            justify-content: space-around;
            div {
                width: vw(100);
                height: vw(63);
                img {
                    width: vw(63);
                    height: vw(63);
                }
            }
            a {
                line-height: vw(73);
            }
        }

        .top_two {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: vw(23);
            a {
                margin-right: vw(10);
            }
            img {
                width: vw(28);
                height: vw(28);
            }
        }
    }

    .main_four {
        margin-top: vw(79);
        display: flex;
        justify-content: space-between;
        .top_one {
            margin-left: vw(23);
            display: flex;
            justify-content: space-around;
            div {
                width: vw(100);
                height: vw(82);
                img {
                    width: vw(85);
                    height: vw(82);
                }
            }
            a {
                line-height: vw(73);
            }
        }

        .top_two {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: vw(23);
            a {
                margin-right: vw(10);
            }
            img {
                width: vw(28);
                height: vw(28);
            }
        }
    }

    .main_five {
        margin-top: vw(24);
        display: flex;
        justify-content: space-between;
        .top_one {
            margin-left: vw(23);
            display: flex;
            justify-content: space-around;
            div {
                width: vw(100);
                height: vw(63);
                img {
                    width: vw(88);
                    height: vw(61);
                }
            }
            a {
                line-height: vw(73);
            }
        }

        .top_two {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: vw(23);
            a {
                margin-right: vw(10);
            }
            img {
                width: vw(28);
                height: vw(28);
            }
        }
    }

    .main_bt {
        margin-top: vw(37);
        height: vw(143);
        display: flex;
        justify-content: space-around;
        a {
            display: inline-block;
            font-size: vw(24);
            width: vw(150);
            height: vw(74);
            background-color: $col;
            text-align: center;
            line-height: vw(74);
            border-radius: vw(50);
            color: #fff;
        }
    }
}

nav {
    position: sticky;
    bottom: 0;
    .bt_box{
        display: flex;
        justify-content: space-around;
        width: vw(750);
        height: vw(110);
        background-color: #fff;
        div {
            display: inline-block;
            width: vw(73);
            text-align: center;
            a {
                img {
                    width: vw(73);
                    height: vw(73);
                }
            }
        }
    }
}